
<script setup>


import { ref,onMounted,reactive,onUpdated,defineProps  } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import {shouquan} from '../../api/index'
const router = useRouter()

const validateSellerId=(rule, value, callback)=> {
    if (!value) {
      callback(new Error('请输入sellerId'));
    } else if (!/^\d+$/.test(value)) {
      callback(new Error('sellerId必须为数字'));
    } else {
      callback();
    }
  }

const ruleForm=reactive({
          name: '',
          clientId: '',
          apiKey: '',
          sellerId: '',
      
        })

        const rules=reactive(  {
          name: [
            { required: true, message: '请输入店铺名称', trigger: 'blur' },
            // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          clientId: [
            { required: true, message: '请输入clientId', trigger: 'change' }
          ],
          apiKey: [
          { required: true, message: '请输入apiKey', trigger: 'change' }
          ],
          sellerId: [
          { required: true, message: '请输入sellerId', trigger: 'change' },
          { validator: validateSellerId, trigger: 'change' }
          ],
        
        });
        const ruleForms =ref()

        const submitForm = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
        shouquan(ruleForm).then((res)=>{
           
            if(res.code==200){
              router.back()
            }
        })
    } else {
      console.log('error submit!', fields)
    }
  })
}
</script>
<template>
    <p style="font-size: 20px; text-align: center;">店铺授权</p>
<div style="padding: 30px; width: 30%;">
    
    <el-form 
 label-position="top"
 :model="ruleForm" :rules="rules" ref="ruleForms" label-width="120px" class="demo-ruleForm">
    <el-form-item  prop="name">

        <template #label>
            <el-tooltip class="item" effect="dark" content="建议与开设的平台保持一致" placement="top-start">
                <span style="font-size: 12px; font-weight: 700;color: #000;"> 店铺名称 <i class="el-icon-question"></i></span>

    </el-tooltip>
        </template>
      <el-input  v-model="ruleForm.name"></el-input>
    </el-form-item>

    
  <el-form-item label="Client_id" prop="clientId">

    <template #label>
            <el-tooltip class="item" effect="dark" content="如何获取？登录ozon商家后台-点头像-设置-API密钥-Client_ID" placement="top-start">
                <span style="font-size: 12px; font-weight: 700;color: #000;"> Client_id <i class="el-icon-question"></i></span>

    </el-tooltip>
        </template>

    <el-input v-model="ruleForm.clientId"></el-input>
  </el-form-item>
  <el-form-item label="API密钥" prop="apiKey">
    <template #label>
            <el-tooltip class="item" effect="dark" content="如何获取？登录ozon商家后台-点头像-设置-API密钥-生成密钥-身份选择管理员" placement="top-start">
                <span style="font-size: 12px; font-weight: 700;color: #000;"> API密钥 <i class="el-icon-question"></i></span>

    </el-tooltip>
        </template>

    <el-input v-model="ruleForm.apiKey"></el-input>
  </el-form-item>
  <el-form-item label="卖家识别号" prop="sellerId">
    <template #label>
            <el-tooltip class="item" effect="dark" content="如何获取？登录ozon商家后台-点头像-设置-API密钥-生成密钥-身份选择管理员" placement="top-start">
                <span style="font-size: 12px; font-weight: 700;color: #000;"> 卖家识别号 <i class="el-icon-question"></i></span>

    </el-tooltip>
        </template>
    <el-input v-model="ruleForm.sellerId"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button   style="margin-top: 30px; color: #fff;font-size: 12px;" 
type="primary" color="rgb(78 168 185)" round @click="submitForm(ruleForms)">立即授权</el-button>
  </el-form-item>
</el-form>
</div>
</template>

<style scoped>
:deep(.el-input__wrapper) {
    width: 300px;
    border-radius: 30px !important;}
    :deep(.el-form-item) {
        margin-bottom:20px ;
    }
</style>